import { login } from "@/services/ant-design-pro/api";
import { s_getLoginCount } from "@/services/basis";
import { Column, Line, Pie } from "@ant-design/charts"
import { ArrowUpOutlined, LikeOutlined } from "@ant-design/icons";
import { useDeepCompareEffect } from "@ant-design/pro-components";
import { useRequest } from "@umijs/max";
import { Button, Card, Carousel, Col, Row, Select, Space, Statistic, Typography } from "antd";
import moment from "moment";
import { Divider } from "rc-menu";
import { useEffect, useState } from "react";
 

const App:React.FC=()=>{
  const [loginCount,setLoginCount]=useState();
  useRequest(()=>s_getLoginCount({px_id:1,pmodel:'price',type:'day',
                                  begindate:'2023-01-01',
                                  enddate:moment().format('YYYY-MM-DD')}),{
    onSuccess:(data)=>{
         setLoginCount(data);
    }
  });
  
  //{px_id,pmodel,type,begindate,enddate}

  //折线图，注意双折线的数据，要依次并行录入。
  const data=[
    {month:'1月',value:560,type:'月份'},{month:'1月',value:660,type:'人工工资'},
    {month:'2月',value:600,type:'月份'},{month:'2月',value:500,type:'人工工资'},
    {month:'3月',value:550,type:'月份'},{month:'3月',value:700,type:'人工工资'},
    {month:'4月',value:800,type:'月份'},{month:'4月',value:800,type:'人工工资'},
    {month:'5月',value:780,type:'月份'},{month:'5月',value:800,type:'人工工资'},
    {month:'6月',value:820,type:'月份'}, {month:'6月',value:900,type:'人工工资'},
    {month:'7月',value:700,type:'月份'},{month:'7月',value:800,type:'人工工资'},
    {month:'8月',value:660,type:'月份'},{month:'8月',value:700,type:'人工工资'},
    {month:'9月',value:810,type:'月份'},{month:'9月',value:800,type:'人工工资'},
    {month:'10月',value:760,type:'月份'},{month:'10月',value:800,type:'人工工资'},
     ];
 
  const config={
    data,
    xField:'month',
    yField:'value',
    colorField:'type',
    
    };
// //饼图--逆时针显示数据
const data2=[
  {type:'人工工资',value:2100},
  {type:'研发材料',value:1800},
  {type:'设备工装',value:1500},
  {type:'差旅费',value:1200},
  {type:'其他',value:2200},
];

// //小程序查询统计
// const config={
//   // data:loginCount,
//   xField:'item',
//   yField:'count',
// }
//柱状图--部门业绩评比
const data3=[
  {org:'XX类项目',value:36},
  {org:'YY类项目',value:32},
  {org:'DD类项目',value:28},
  {org:'其他项目',value:16},
];
  
// ==================================================================================================================
  return(
    <>
    <Row gutter={8}>
      <Col span={4}>
        <Card style={{height:'12vh'}}>
          <Statistic title='本月累计工时' value={5680} suffix='H'/>
        </Card></Col>
      <Col span={4}>
        <Card style={{height:'12vh'}}>
          <Statistic title='本月累计工资' value={16.85} precision={2} prefix={<LikeOutlined/>} suffix="万"/>
        </Card></Col>
        <Col span={4}>
        <Card style={{height:'12vh',color:'red'}}    >
          <Statistic title='本月累计材料' value={185} suffix="万" prefix={<ArrowUpOutlined />} valueStyle={{color:"red"}} />
        </Card></Col>
        <Col span={4}>
        <Card style={{height:'12vh'}}>
          <Statistic title='本月其他费用' value={162} suffix=' 万'/>
        </Card></Col>
        <Col span={4}>
        <Card style={{height:'12vh'}}>
          <Statistic title='在建项目工时' value={132} prefix={<LikeOutlined/>} suffix='H'/>
        </Card></Col>
        <Col span={4}>
        <Card style={{height:'12vh'}}>
          <Statistic title='待验收项目' value={2.6} prefix={<ArrowUpOutlined/>} suffix='个' valueStyle={{color:"red"}} />
        </Card>
      </Col>
    </Row>
    <Row style={{marginTop:16}}/>
    <Row gutter={8}   >
      <Col span={8}>
      <Card style={{height:'56vh',overflow:'auto'}} >
          {/* 双折线
          <Line {...config} title='年度目标达成分析（万）'  autoFit={true} /> */}
          <Space style={{alignItems:'center'}} >
            <Typography.Text style={{width:200}}>月份和人工工资</Typography.Text>
            <Select title="选择类型" defaultValue='day' style={{width:100}} 
               options={[{label:'年度',value:'year'},{label:'月份',value:'month'},{label:'日',value:'day'}]}
               onChange={async (e)=>{
                //alert(JSON.stringify(e));
                const x=await s_getLoginCount({px_id:1,pmodel:'price',type:e,
                         begindate:'2023-01-01',enddate:moment().format('YYYY-MM-DD')});
               // alert(JSON.stringify(x));
                setLoginCount(x.data);
               }}
             />
          </Space>
          <Line {...config}  data={data} 
                      scale={{
                              month:{min:0,max:1000,tickCount:10},value:{min:0,max:1000,tickCount:10}
                            }} 
                      autoFit={true} height={400} />
      </Card>
      </Col>
       <Col span={8}>
      <Card  style={{height:'56vh',overflow:'auto'}} >
          <Pie title='费用支出比例'  autoFit={true} data={data2} colorField='type' angleField='value'
             label={{text:'value'}} innerRadius={0.6} height={400}
          />
      </Card>
      </Col>
       <Col span={8}>
      <Card  style={{height:'56vh',overflow:'auto'}} >
          <Column title='研发项目类别统计'  autoFit={true} data={data3} xField='org'  height={400}
             yField='value' label={{text:'value',textBaseline:'bottom'}}  style={{width:60}} />
      </Card>
      </Col>
    </Row>
     
      <Card style={{height:'15vh'}}>
          <Carousel dotPosition="right" autoplay={true} autoplaySpeed={2000} infinite={true}>
            <div>
              <>
                <Typography.Title level={4} style={{color:"red"}}>荣誉榜</Typography.Title>
                <Typography.Text style={{fontSize:"18px"}} >业务二组：本月度业绩冲刺中，表现优异，本小组达成全公司第一名。</Typography.Text>
             </>
              </div>
              <div>
              <>
                <Typography.Title level={4} style={{color:"orange"}}>争先榜</Typography.Title>
                <Typography.Text style={{fontSize:"18px"}} >业务一组：本月度业绩冲刺中，本小组达成全公司第二名。</Typography.Text>
             </>
              </div>
              <div>
              <>
                <Typography.Title level={4} style={{color:"green"}}>警示榜</Typography.Title>
                <Typography.Text style={{fontSize:"18px"}} >吴美越：昨日（9月16日）无故迟到15分钟。</Typography.Text>
             </>
              </div>
             
           
          </Carousel>
      </Card>
       
    </>
  );
}

export default App;